<template>
	<view class="container">
		<st-navigation title="填写预约单" backgroundColor="#F6F5FA"></st-navigation>
		<view class="main" style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start;">
			
			<view class="avatar">
				<StAvatar :photoHeight="160" :photo-width="160" :designer="designer" style="width: 100%; height: 100%;"></StAvatar>
				<!-- <image :src="$wanlshop.ossYSM(user.avatar, 60, 60, 2, 'avatar')" mode="aspectFill"></image> -->
			</view>
			<view class="name">欢迎您的预约</view>

			<view class="form-info-box">
				<view class="form-item">
					<view class="label">您的称呼<span class="redTip">*</span></view>
					<view class="value">
						<input :focus="autoFocus1" id="nameInput" class="inp-text" name="name" v-model="formData.name" placeholder=" " />
					</view>
				</view>
				<view class="form-item">
					<view class="label">联系方式<span class="redTip">*</span></view>
					<view class="value">
						<input class="inp-text" name="phone" v-model="formData.phone" placeholder=" " />
					</view>
				</view>
				<view class="form-item">
					<view class="label">量房地址<span class="redTip">*</span></view>
					<view class="value">
						<input :focus="autoFocus2" id="adrInput" class="inp-text" name="address" v-model="formData.address" placeholder=" " />
					</view>
				</view>
				<view class="form-item" style="border-bottom: 0px;">
					<view class="label">面积大小<span class="radioTip">(单选)</span><span class="redTip">*</span></view>
					<view>
						<view @click="radioItemClick(item)" class="radioItem" v-for="(item,index) in radioList"
							:key="index">
							<view class="radio1" :class="item.isSele?'radio1':''">
								<view v-if="item.isSele"
									style="width: 12rpx; height: 12rpx; border-radius: 6rpx;background-color: #ff6a03;">
								</view>
							</view>

							<view class="name1">{{item.name}}</view>
						</view>
					</view>

				</view>
				<!-- <view class="form-item type-info" style="border-bottom: 0px;">
					<view class="label">类型<span class="redTip">*</span></view>
					<view class="value"> -->
						<!-- <picker @change="bindTypePickerChange" :value="formData.type" :range="typeOptions">
								<view class="flex align-center">
									<input class="inp-text" name="type" v-model="formData.type" placeholder="请输入" :readonly="true"
										disabled />
									<text class="cuIcon-triangledownfill icon"></text>
								</view>
							</picker> -->
				<!-- 		<uni-data-select v-model="formData.type" :localdata="typeOptions" @change="bindTypePickerChange"
							placeholder="请输入" :clear="false" class="select-wrap"></uni-data-select>
					</view>
				</view> -->
				<!-- <view class="form-item time-info">
					<view class="label">量房时间<span class="redTip">*</span></view>
					<view class="value"> -->
						<!-- <picker mode="date" :value="formData.bookingtime" :start="startDate" :end="endDate" @change="bindDateChange">
								<input class="inp-text" name="bookingtime" v-model="formData.bookingtime" placeholder="请输入" :readonly="true"
									disabled />
							</picker> -->
					<!-- 	<uni-datetime-picker style="timePicker" placeholder="请输入" type="datetime"
							v-model="formData.bookingtime" />
					</view>
				</view> -->
			</view>




			<view style="width: 100%; text-align: left; margin-top: 16rpx; margin-bottom: 16rpx;">补充留言</view>
			<view class="form-textarea common-bottom">
				<textarea v-model="formData.content" style="width: 100%;height: 100%;" name="content"
					placeholder="如果您有特殊要求，请填写在此处......" />
			</view>
			<!-- <view class="common-bottom remark">*定金{{ allConfig.booking_fee || '--' }}元，未量房可退还</view> -->
			<view class="submit-btn-box"  @click="formSubmit" style="z-index: 99999; width: 100%;">
				<button class="submit-btn" :loading="loading">提交预约单</button>
			</view>


		</view>
		<!-- showPromptMessage -->
		<u-popup round='8' :show="showPromptMessage" mode='center'>
			<view class="d-flex flex-column a-center j-center" style="width:80vw;height: 350rpx;gap: 30rpx;">
				<view class="rounded-circle d-flex a-center j-center"
					style="width: 150rpx;height: 150rpx;background-color:#ff6a03;">
					<u-icon name="checkmark" color="#fff" size="45"></u-icon>
				</view>
				<view style="font-size: 35rpx;font-weight: bold;">预约成功</view>
				<view style="font-size: 18px">{{countDown}}S</view>
			</view>
		</u-popup>
		<u-popup round='8' @close="showLogin = false" :closeable='true' :show="showLogin" mode='center'>
			<view class="loginPoup">
				<view class="title1">手机验证</view>
				<view class="title2">短信已发送至{{formData.phone}}</view>
				<view class="inputBox1">
					<input v-model="loginPoup.captcha" placeholder="请输入短信验证码" />
					<view class="countText" v-if="loginPoup.countdown > 0">重新获取({{ loginPoup.countdown }})</view>
					<view class="countText" style="color: black;" v-else @click="sendMessage">获取验证码</view>

				</view>
				<button @click="loginBtnClick" class="sureBtn" :disabled="!loginPoup.sureEnable">确定</button>



			</view>
		</u-popup>
	</view>
</template>

<script>
	import StAvatar from '../../components/st-avatar/st-avatar.vue';
	import graceChecker from '@/common/graceChecker';


	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			StAvatar
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				autoFocus1:false,
				autoFocus2:false,
				showLogin: false,
				setTime: "",
				countDown: 3,
				showPromptMessage: false,
				allConfig: {},
				typeOptions: [],
				typeIndex: 0,
				formData: {
					designer_id: '',
					address: '', // 量房地址
					// bookingtime: currentDate, // 预约时间
					bookingtime: '', // 预约时间
					area: '', // 多少平方
					type: '', // 类型
					content: '', // 备注
					price: '', // 价格
					name: '',
					phone: ''
				},
				payList: [],
				isbalance: false,
				loading: false,
				disabled: false,

				order_id: '',
				booking_id: '',

				designer: {},
				fromurl: '',
				fromurl_id: 0,
				radioList: [{
						name: '70㎡以下',
						isSele: false
					},
					{
						name: '70-150㎡',
						isSele: false
					},
					{
						name: '150-300㎡',
						isSele: false
					},
					{
						name: '300㎡以上',
						isSele: false
					}
				],
				loginPoup: {
					countdown: 0,
					cTimer: null,
					verEnable: false,
					sureEnable: true,
					captcha:''
				}
			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common']),

			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			selectType() {
				return this.formData.type || '';
				/* let type = this.allConfig.type;
				if (type && type.length && this.formData.type) {
					return type.find(x => x.name === this.formData.type)['id'];
				}
				return ''; */
			},
		},

		onLoad(option) {
			if (option && option.fromurl) {
				this.fromurl = option.fromurl;
				this.fromurl_id = option.fromurl_id
				uni.setStorageSync('fromurl', option.fromurl)
				uni.setStorageSync('fromurl_id', option.fromurl_id)
			}

			this.designer = JSON.parse(decodeURIComponent(option.designer));

			console.log(option);

			let {
				designer_id
			} = option;
			if (!designer_id) {
				uni.navigateBack();
				return;
			}
			if (this.user) {
				console.log('有登录信息')
				this.formData.phone = this.user.mobile
				this.formData.name =  this.user.nickname || this.user.mobile
				
			}
			setTimeout(res=>{
				if(this.formData.phone){
					this.autoFocus2 = true
				}else{
					this.autoFocus1 = true
				}
			},800)
			
			
			this.formData.designer_id = designer_id;
			this.queryConfig();

			this.getPayment();
		},
		onShow() {

		},
		watch: {
			countDown(newVal) {
				if (newVal === 0 && this.setTime) {
					clearInterval(this.setTime)
					this.showPromptMessage = false
					
					setTimeout(() => {
						if (this._toAddInfo){
							uni.redirectTo({
								url: '/pagesYSM/ysmMy/setting/improve'
							})
							return
						}
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				}
			}
		},
		methods: {
			radioItemClick(item) {
				this.radioList.forEach(model => {
					if (model.name == item.name) {
						model.isSele = true
						this.formData.area = model.name
					} else {
						model.isSele = false
					}
				})

			},
			queryConfig() {
				this.$api.get({
					url: '/wanlshop/config/all',
					success: res => {
						console.log(res);
						let {
							type
						} = res;
						this.typeOptions = type.map(item => {
							return {
								label: item.name,
								text: item.name,
								value: item.id
							}
						});
						console.log(this.typeOptions);
						this.allConfig = res;
						this.formData.price = res.booking_price;
					},
					error: err => {
						console.log(err);
					}
				})
			},

			getPayment() {
				let method = 'wap';
				// #ifdef APP-PLUS
				method = 'app';
				// #endif
				// #ifdef MP-BAIDU
				method = 'mini';
				// #endif
				// #ifdef MP-WEIXIN
				method = 'miniapp';
				// #endif
				// #ifdef MP-ALIPAY
				method = 'mini';
				// #endif
				// #ifdef MP-QQ
				method = 'mini';
				// #endif
				this.payList = [{
					name: '余额支付',
					describe: '',
					type: 'balance',
					method: 'balance',
					state: this.isbalance ? true : false, // 是否可用
					select: this.isbalance ? true : false // 是否选中
				}];
				// #ifdef H5
				this.payList.push({
					name: '支付宝',
					describe: '',
					type: 'alipay',
					method: method,
					state: true,
					select: false
				}, {
					name: '微信支付',
					describe: '推荐使用微信支付',
					type: 'wechat',
					method: method,
					state: true,
					select: this.isbalance ? false : true
				});
				// #endif
				// #ifndef H5
				uni.getProvider({
					service: "payment",
					success: (e) => {
						e.provider.map((value) => {
							if (value == 'alipay') {
								this.payList.push({
									name: '支付宝',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							} else if (value == 'wxpay') {
								this.payList.push({
									name: '微信支付',
									describe: '推荐使用微信支付',
									type: 'wechat',
									method: method,
									state: true,
									select: this.isbalance ? false : true
								});
							} else if (value == 'baidu') {
								this.payList.push({
									name: '百度收银台',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							} else if (value == 'appleiap') {
								this.payList.push({
									name: 'Apple支付',
									describe: '',
									type: 'apple',
									method: method,
									state: true,
									select: false
								});
							}
						})
					}
				});
				// #endif
			},
			sendMessage(showPoup) {
				let {
					phone
				} = this.formData;
				var rule = [{
					name: 'phone',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}];
				var formData = this.formData;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.startTimer();
					this.loginPoup.countdown = 60;
					this.showLogin = true //一开始就弹出
					this.$api.get({
						url: '/wanlshop/sms/send',
						data: {
							event: 'mobilelogin',
							mobile: this.formData.phone
						},
						loadingTip: '验证码发送中...',
						success: res => {
							if (showPoup) {
								//this.showLogin = true
							}
							//this.$wanlshop.msg('验证码发送成功');
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}

			},
			startTimer() {
				if (this.loginPoup.cTimer == null) {
					this.loginPoup.cTimer = setInterval(() => {
						this.loginPoup.countdown--;
						if (this.loginPoup.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.loginPoup.cTimer);
				this.loginPoup.cTimer = null;
			},

			loginBtnClick() {
				if (!this.loginPoup.sureEnable) {
					return
				}
				this.loginPoup.sureEnable = false
				this.$api.post({
					url: '/wanlshop/user/mobilelogin',
					data: {
						mobile: this.formData.phone,
						nickname:this.formData.name,
						captcha: this.loginPoup.captcha,
						client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
							"wanlshop:chat_client_id") : null
					},
					//loadingTip: '登录中...',
					success: res => {
						//this.$wanlshop.msg('登录成功');
						uni.hideLoading();
						this.loginPoup.sureEnable = true
						this.showLogin = false
						this.$store.dispatch('user/login', res);

						// todo 要改回来
						if (res.is_new == true) {
							// uni.navigateTo({
							// 	url: '/pagesYSM/ysmMy/setting/improve'
							// });
							this._toAddInfo = true
							this.formSubmit()
						} else {
							this.formSubmit()
							// uni.reLaunch({
							// 	url: decodeURIComponent(this.pageroute) || '/pages/ysmMy/ysmMy'
							// });
						}
					},
					fail:err=>{
						this.loginPoup.sureEnable = true
					}
				});
			},


			formSubmit(e) {
				console.log(this.formData, '+++++++');
				if (this.disabled) {
					return;
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					})
					return;
				}
				if (!this.formData.address) {
					uni.showToast({
						title: '请输入量房地址',
						icon: 'none'
					})
					return;
				}
				// if (!this.formData.bookingtime) {
				// 	uni.showToast({
				// 		title: '请选择量房时间',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				if (!this.formData.area) {
					uni.showToast({
						title: '请选择面积',
						icon: 'none'
					})

					return;
				}
				// if (!/^\d+$/.test(this.formData.area)) {
				// 	return uni.showToast({
				// 		title: '请输入正确的面积',
				// 		icon: 'none'
				// 	})
				// }
				// if (!this.formData.type) {
				// 	uni.showToast({
				// 		title: '请选择类型',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				if (!this.user || !this.user.token) {
					this.sendMessage(true)
					return;
				}
				let params = JSON.parse(JSON.stringify(this.formData));
				params.type = this.selectType;
				params.price = this.allConfig.booking_fee;
				params.fromurl = uni.getStorageSync('fromurl')
				params.fromurl_id = uni.getStorageSync('fromurl_id')
				//params.area = 12
				this.loading = true;
				this.disabled = true;

				this.$api.post({
					url: '/wanlshop/order/addBookingOrder',
					data: params,
					success: res => {
						this.order_id = res.order_id;
						this.booking_id = res.booking_id;
						console.log(res);

						let data = null;
						data = this.payList.find(x => x.type === 'wechat');
						data.method = 'miniapp';
						this.showPromptMessage = true
						this.setTime = setInterval(() => {
							this.countDown--
						}, 1000)
						this.loading = false;
						this.disabled = false;

						// #ifdef MP
						// uni.login({
						// 	success: (e) => {
						// 		this.wanlPay(data, e.code);
						// 	},
						// 	fail: (e) => {
						// 		uni.showModal({
						// 			content: "无法获取微信code,原因为: " + e.errMsg,
						// 			showCancel: false
						// 		})
						// 		this.loading = false;
						// 		this.disabled = false;
						// 	}
						// })
						// #endif
						// #ifndef MP
						// this.wanlPay(data);
						// #endif

						/* uni.showToast({
							title: '预约成功',
							icon: 'none'
						})
						setTimeout(() => {
							// uni.navigateBack();
							uni.redirectTo({
								url: `/pagesYSM/ysmMy/custom/custom?id=${res}`
							})
						}, 1000); */
					},
					error: err => {
						this.loading = false;
						this.disabled = false;
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})

			},

			async wanlPay(data, code = null) {
				await this.$api.post({
					url: '/wanlshop/pay/payment',
					data: {
						type: data.type,
						method: data.method,
						code: code,
						order_id: this.order_id
					},
					success: (res) => {
						// 余额支付/小程序支付
						if (data.type == 'balance') {
							this.$store.commit('user/setUserInfo', {
								money: this.$wanlshop.bcsub(this.$store.state.user
									.money,
									this
									.price)
							});
							this.paySuccess();
						}
						// 微信 H5支付
						if (data.type == 'wechat' && data.method == 'wap') {
							// 关闭loading
							this.loading = false;
							uni.showModal({
								title: '微信支付',
								content: '是否已完成支付',
								success: (res) => {
									if (res.confirm) {
										this.paySuccess();
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							// 异步查询是否支付成功
							window.location.href = res;
						}
						// 支付宝 H5支付
						if (data.type == 'alipay' && data.method == 'wap') {
							this.loading = false;
							this.$store.commit('statistics/order', {
								pay: this.$wanlshop.bcsub(this.$store.state.statistics
									.order.pay,
									this.payNum),
								delive: this.$wanlshop.bcadd(this.$store.state
									.statistics
									.order
									.delive, this.payNum)
							});
							document.write(res);
						}
						// 微信小程序支付
						if (data.type == 'wechat' && data.method == 'miniapp') {
							uni.requestPayment({
								appId: res.appId,
								nonceStr: res.nonceStr,
								package: res.package,
								paySign: res.paySign,
								signType: res.signType,
								timeStamp: res.timeStamp,
								success: (e) => {
									console.log(e, '小程序支付成功')
									this.paySuccess();
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败,原因为: " + e.errMsg,
										showCancel: false
									})
								},
								complete: () => {
									this.loading = false;
									this.disabled = false;
								}
							})
						}
						// APP支付
						if ((data.type == 'alipay' || data.type == 'wechat') && data.method ==
							'app') {
							let provider = data.type;
							if (data.type == 'wechat') {
								provider = 'wxpay';
							}
							uni.requestPayment({
								provider: provider,
								orderInfo: res,
								success: (e) => {
									console.log("success", e);
									this.paySuccess();
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败,原因为: " + e.errMsg,
										showCancel: false
									})
								},
								complete: () => {
									this.loading = false;
									this.disabled = false;
								}
							})
						}
					},
					error: () => {
						this.loading = false;
						this.disabled = false;
					}
				});

				this.loading = false;
				this.disabled = false;
			},
			// 支付成功
			paySuccess() {
				this.loading = false;
				/* this.$store.commit('statistics/order', {
					pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
					delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
				}); */
				// this.$wanlshop.to('/pages/page/success?type=pay');
				uni.showModal({
					content: "支付成功",
					showCancel: false,
					success: () => {
						uni.redirectTo({
							url: `/pagesYSM/ysmMy/custom/custom?id=${this.booking_id}`
						})
					}
				})

			},
			bindDateChange(e) {
				console.log(e);
				this.formData.bookingtime = e.detail.value
			},
			bindTypePickerChange(e) {
				this.formData.type = e;
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background: #F6F5FA;
		padding-bottom: 40rpx;
	}

	.loginPoup {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx 80rpx;
		box-sizing: border-box;

		.title1 {
			margin-top: 30rpx;
			font-size: 30rpx;
		}

		.title2 {
			margin-top: 35rpx;
			margin-bottom: 40rpx;

			font-size: 26rpx;
			color: rgb(153, 153, 153);
		}

		.inputBox1 {
			width: 520rpx;
			height: 70rpx;
			border: 1px solid rgb(230, 230, 230);
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-size: 28rpx;

			input {
				flex: 1;
			}

			.countText {
				margin-left: 20rpx;
				color: rgb(230, 230, 230);
			}
		}

		.sureBtn {
			width: 520rpx;
			text-align: center;
			margin-top: 60rpx;
			margin-bottom: 30rpx;
			font-size: 30rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			color: white;
			background-color: #029AFF;
		}
	}


	.common-border {
		border: 0.5px solid #E6E6E6;
	}

	.main {
		padding: 0 32rpx;

		.name {
			font-size: 32rpx;
			color: #333333;
			// margin-top: 20rpx;
			font-weight: 600;
			line-height: 60rpx;
			text-align: center;
		}

		.avatar {
			width: 160rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			line-height: 34rpx;
			color: #808080;
			margin-top: 66rpx;
			margin-bottom: 28rpx;
		}

		.form-info-box {
			margin-top: 20rpx;
			width: 100%;
			padding: 20rpx;
			padding: 20rpx 20rpx 0rpx 20rpx;
			box-sizing: border-box;
			background-color: white;
			border-radius: 10rpx;
		}

		.form-item {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-bottom: 24rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.redTip {
				// font-weight: normal;
				color: rgb(255, 68, 68);
				margin-left: 5rpx;
				// font-size: 20rpx;
			}

			.radioTip {
				font-weight: normal;
				margin-left: 3rpx;
			}

			.form-item_item {
				display: flex;
				position: relative;


				.value {
					text-align: center;
					display: flex;
					align-items: center;
				}

				.icon {
					/* position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translate(0,-50%); */
					font-size: 36rpx;
				}


				/deep/ .uni-select {
					border: none !important;
					font-weight: 500;
					font-size: 28rpx;
					height: 50rpx !important;
					width: 168rpx !important;

					.uni-select__input-text {
						color: #808080 !important;
					}
				}
			}

			.label {
				font-size: 28rpx;
				margin-left: 10rpx;
				font-weight: 600;
				color: rgb(109, 109, 109);
			}

			.value {
				margin-top: 0rpx;
				background-color: #fff;
				padding: 10rpx;
				box-sizing: border-box;
				width: 100%;
			}

			.type-info {
				width: 50%;

				.value {
					padding: 0 !important;
				}

				/deep/ .uni-select__input-text,
				.uni-select__input-placeholder {
					font-size: 28rpx !important;
					color: #808080 !important;
					font-weight: 400;
				}
			}


		}

		.time-info {
			.value {
				padding: 0 !important;
				background-color: #fff;
				height: 91rpx;
				display: flex;
				align-items: center;

				/deep/ .uni-date-x--border {
					border: none !important;
					border-radius: 0 !important;
				}

				/deep/ .uni-date__x-input {
					font-size: 28rpx !important;
					color: #808080 !important;
					font-weight: 400;
					margin-left: 0rpx;
					padding-left: 0rpx;
				}

				/deep/ .uniui-calendar {
					display: none;
				}
			}
		}

		.radioItem {
			float: left;
			width: 250rpx;
			font-size: 0px;
			margin: 30rpx 30rpx 0rpx 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			.radio1 {
				width: 36rpx;
				height: 36rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-right: 15rpx;
				border: 1px solid rgb(153, 153, 153);
				border-radius: 36rpx;

			}

			.name1 {
				font-size: 28rpx;
				color: black;
			}
		}

		.radio1-sel {
			border-color: #FF6A03;
		}


		.common-bottom {
			margin-bottom: 20rpx;
			width: 100%;
		}

		.form-textarea {
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			font-size: 28rpx;
			// color: #B3B3B3;
			height: 140rpx;
			width: 100%;
		}

		.remark {
			color: #F1B61A;
		}

		.inp-text {
			background-color: #fff;
			font-size: 28rpx;
			text-align: left;
		}
		
		.submit-btn-box {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-bottom: 24rpx;
			// border-bottom: 1rpx solid #E6E6E6;
		}

		.submit-btn {
			background: #FF6A03;
			width: 100%;
			font-size: 28rpx;
			color: #fff;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 0px;
			// padding: 28rpx 0;
		}
	}
</style>